<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="7">
        <el-card class="box-card">
          <div slot="header">
            <span>个人信息</span>
          </div>
          <div class="info-content ">
            <div class="avatar">
              <el-avatar :size="128" :src="Avatar" @error="errorHandler">
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
              </el-avatar>
            </div>
            <ul class="list-group list-group-striped">
              <li class="list-group-item">
                <i class="el-icon-user-solid"/>用户名称
                <div class="pull-right">{{ userInfo.name }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-phone"/>手机号码
                <div class="pull-right">{{ userInfo.phone }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-message"/>用户邮箱
                <div class="pull-right">{{ userInfo.email }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-postcard"/>所属部门
                <div class="pull-right" v-if="userInfo.dept">{{ userInfo.dept }}</div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-monitor"/>工作岗位
                <div class="pull-right" v-if="userInfo.dept">
                  <span v-for="item in userInfo.posts">{{ item }} </span>
                </div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-user"/>所属角色
                <div class="pull-right"><span v-for="item in userInfo.roles">{{ item }} </span></div>
              </li>
              <li class="list-group-item">
                <i class="el-icon-date"/>创建日期
                <div class="pull-right">{{ userInfo.date_joined }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="17">
        <el-card class="box-card">
          <div slot="header">
            <span>基本资料</span>
          </div>
          <div class="grid-content ">
            <el-tabs>
              <el-tab-pane label="基本资料">
                <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                  <el-form-item label="用户姓名" prop="name">
                    <el-input v-model="form.name"/>
                  </el-form-item>
                  <el-form-item label="身份证号" prop="id_card">
                    <el-input v-model="form.id_card" maxlength="18"/>
                  </el-form-item>
                  <el-form-item label="手机号码" prop="phone">
                    <el-input v-model="form.phone" maxlength="11"/>
                  </el-form-item>
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email" maxlength="50"/>
                  </el-form-item>
                  <el-form-item label="性别">
                    <el-radio-group v-model="form.gender">
                      <el-radio :label="1">男</el-radio>
                      <el-radio :label="2">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="submit('profile')">保存</el-button>
                    <el-button type="danger" @click="close">关闭</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
              <el-tab-pane label="修改密码">
                <el-form ref="repasswordform" :model="form" :rules="repwdRule" label-width="80px">
                  <el-form-item label="旧密码" prop="oldPassword">
                    <el-input v-model="form.oldPassword" placeholder="请输入旧密码" type="password"/>
                  </el-form-item>
                  <el-form-item label="新密码" prop="newPassword">
                    <el-input v-model="form.newPassword" placeholder="请输入新密码" type="password"/>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input v-model="form.confirmPassword" placeholder="请确认密码" type="password"/>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" size="mini" @click="submit('password')">保存</el-button>
                    <el-button type="danger" size="mini" @click="close">关闭</el-button>
                  </el-form-item>
                </el-form>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Avatar from '@/assets/avatar.png'
import {mapGetters} from 'vuex';
import {getUser, getUserInfo, setPassword, updateDictionary, updateUser} from "@/api";

export default {
  name: "userCenter",
  computed: {
    ...mapGetters(['userInfo']),
  },
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.form.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      Avatar: Avatar,
      form: {
        name: undefined,
        phone: undefined,
        email: undefined,
        id_card: undefined,
        gender: 0,
        password: undefined,
        id: undefined,
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined,
      },
      // 表单校验
      rules: {
        name: [
          {required: true, message: "用户昵称不能为空", trigger: "blur"}
        ],
        email: [
          {required: true, message: "邮箱地址不能为空", trigger: "blur"},
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        phone: [
          {required: true, message: "手机号码不能为空", trigger: "blur"},
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        id_card: [
          {required: true, message: "身份证号码不能为空", trigger: "blur"},
          {
            pattern: /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/,
            message: "请输入正确的身份证号码",
            trigger: "blur"
          }
        ],
      },
      repwdRule: {
        oldPassword: [
          {required: true, message: "旧密码不能为空", trigger: "blur"}
        ],
        newPassword: [
          {required: true, message: "新密码不能为空", trigger: "blur"},
          {min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur"}
        ],
        confirmPassword: [
          {required: true, message: "确认密码不能为空", trigger: "blur"},
          {required: true, validator: equalToPassword, trigger: "blur"}
        ]
      }

    }
  },
  // updated() {
  //   this.initForm()
  // },
  mounted() {
    this.initForm()
  },
  methods: {
    errorHandler() {
      return true
    },
    initForm() {
      const userId = this.$store.getters.userInfo.id
      getUser(userId).then(res => {
        this.form = {...res.data}
      })

    },
    submit(command) {
      const form = this.form

      if (command === 'password') {
        this.$refs["repasswordform"].validate(valid => {
          if (valid) {
            const data = {
              id: form.id,
              old_password: form.oldPassword,
              new_password: form.newPassword
            }
            console.log(data)
            setPassword(data).then(res => {
              this.$message.success('修改密码成功')
              this.form.oldPassword=undefined
              this.form.newPassword=undefined
              this.form.confirmPassword=undefined
            })
          }
        });
      } else {
        this.$refs["form"].validate(valid => {
          if (valid) {
            updateUser(form).then(res => {
              this.$message.success("修改成功");
              this.$router.go(0)
            });
          }
        });
      }
    },
    close() {
      this.$router.back()
    },
  }
}
</script>

<style scoped>
.box-card {
  text-align: left;
}

.info-content {
  /*width: 100%;*/
  padding: 10px;
}

.info-content .avatar {
  text-align: center;
}


.list-group {
  padding-left: 0;
  list-style: none;
}

.list-group-item {
  border-bottom: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 11px 0;
  font-size: 13px;
}

.pull-right {
  float: right !important;
}

.grid-content {

}

</style>